﻿@{

    Layout = null;
}
<html lang="zh">
<head> 
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="full-screen" content="yes">
    <meta content="default" name="apple-mobile-web-app-status-bar-style">
    <meta name="screen-orientation" content="portrait">
    <meta name="browsermode" content="application">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <meta name="x5-page-mode" content="app">
    <base target="_blank">
    <title>聊天室</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="~/Content/chat.css">
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.11.0.min.js"></script>
    <script src="~/Scripts/jquery.signalR-2.3.0.js"></script>
    <script src="~/signalr/hubs"></script>
    <script src="~/Scripts/jquery.qqFace.js"></script>

    <script type="text/javascript">

        var chat = $.connection.chathub;
        var session = '@Common.Common.GetUser().id';
        var sessionName = '@Common.Common.GetUser().loginname';
        chat.client.sendmessage = function (name, message) {

            AddBackMsg(name, replace_em(message), 1)


        };
     

        $(function () {
            $('#emotion').qqFace({
                assign: 'text', //给输入框赋值
                path: '../../arclist/'    //表情图片存放的路径
            });

        });
        $.connection.hub.start().done(function () {

          chat.server.joinGroup(document.getElementById('Groupid').value);

        });
        
 
       

   
       



        function SendMsg() {

            var text = document.getElementById("text");
            if (text.innerHTML == "" || text.innerHTML == null) {
                alert("发送信息为空，请输入！")
            }
            else {
                AddMsg(sessionName, SendMsgDispose(text.innerHTML));
                chat.server.send(session, text.innerHTML, document.getElementById("Groupid").value);


                text.innerHTML = "";

            }
        }
        // 发送的信息处理
        function SendMsgDispose(detail) {
            //detail = detail.replace("\n", "<br>").replace(" ", "&nbsp;")

            return replace_em(detail);
        }


        function replace_em(str) {
            var builder = "";
            var num = str.split("]");

            for (var i = 0; i < num.length; i++) {

                var index = getnum(num[i]);
                // alert(num[i]);
                builder += num[i].replace(/[[][e][m][_][0-9]+/g, '<img src="../../arclist/' + index + '.gif" border="0" />');
            }



            // alert(builder);

            return builder;
        }


        function getnum(st) {
            var nu = st.replace(/[em_[^([1]?\d{1,2\)\)$]/ig, "")
            var nu1 = st.replace(/[^0-9]/ig, "");
            return nu1;
        }
        //// 增加信息
        function AddMsg(user, content) {
            var str = CreateMsg(user, content, 0);
            var msgs = document.getElementById("msgs");
            msgs.innerHTML = msgs.innerHTML + str;
        }


        function AddBackMsg(user, content) {
            var str = CreateMsg(user, content, 1);
            var msgs = document.getElementById("msgs");
            msgs.innerHTML = msgs.innerHTML + str;
        }

        //// 生成内容
        function CreateMsg(user, content, back) {
            var str = "";
            if (back == 1) {
                if (user == sessionName) {
                    return str;
                }

            }
            if (user == sessionName) {
                str = "<div class=\"msg guest\"><div class=\"msg-right\" worker=\"" + user + "\"><div class=\"msg-host photo\" style=\"background-image: url(../../Images/Head.jpg)\"></div><div class=\"msg-ball\" title=\"\">" + content + "</div></div></div>"
            }
            else {
                var time = new Date();
                str = "<div class=\"msg robot\"><div class=\"msg-left\" worker=\"" + user + "\"><div class=\"msg-host photo\" style=\"background-image: url(../../Images/Head.jpg)\"></div><div class=\"msg-ball\" title=\"" + time.toLocaleTimeString() + "\">" + content + "</div></div></div>";
            }
            return str;
        }




        //Image传送
        function uploadImg(na) {
            var _name, _fileName, personsFile;
            personsFile = document.getElementById("image");
            _name = personsFile.value;
            _fileName = _name.substring(_name.lastIndexOf(".") + 1).toLowerCase();
            if (_fileName !== "png" && _fileName !== "jpg") {
                alert("上传图片格式不正确，请重新选择文件！");
                document.getElementById("image").value = "";
            }
            var size = personsFile.files[0].size / 1024;
            //alert(size);
            if (size > 2048) {
                alert("上传图片大小超过2M!");
                return;
            }
            var form = new FormData(document.getElementById("imageform"));
            $.ajax({
                url: "/Chat/UploadImage",
                type: "post",
                data: form,
                processData: false,
                contentType: false,
                success: function (data) {

                    Addimage(data);
                },
                error: function (e) {
                    alert("错误！！");

                }
            });


        }


        //enter事件提交

        document.onkeydown = keyDownSearch;

        function keyDownSearch(e) {
            // 兼容FF和IE和Opera
            var theEvent = e || window.event;
            var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
            if (code == 13) {
                document.getElementById("btnSent").click();//具体处理函数
                return false;
            }
            return true;
        }



        function Addimage(na) {
            var editor = document.getElementById('text');
            // var img = document.createElement('img');

            // 获取input上传的图片数据;
            var img = new Image();
            url = na;
            img.src = "../" + url;
            img.style.height = "81px";
            editor.appendChild(img);
        }


        function Add() {

            var id = document.getElementById("Groupid").value;
            location.href = "../AddUsers/" + id

        }

    </script>
</head>
<body lang="zh">
    <input id="msgtopid" value="0" type="hidden" />
    <input id="Groupid" value="@ViewBag.groupid" type="hidden" />
    <!--<img style="width:100%;height:100%" src="~/Images/chatBack.jpg">-->
    <p style="color: red" onclick="Add()">添加群成员</p>
    <div class="abs cover contaniner">
        <div class="abs cover pnl">

            <div class="top pnl-head">
                <label style="color: red; vertical-align: central; font-size: 20px; margin-bottom: 10px">@ViewBag.GroupName</label>
            </div>
            <div class="abs cover pnl-body" id="pnlBody">
                <div class="abs cover pnl-left">
                    <div class="abs cover pnl-msgs scroll" id="show">
                        <div class="msg min time" id="histStart" onclick="LoadMessage()">加载历史消息</div>
                        <div class="pnl-list" id="hists">
                            <!-- 历史消息 -->
                        </div>

                        <form id="imageform" style="display: none" enctype="multipart/form-data">
                            <input type="file" style="display: none" id="image" name="image" onchange="uploadImg(this)" />
                        </form>
                        <div class="pnl-list" id="msgs">
                        </div>
                        <div class="pnl-list hide" id="unreadLine">
                            <div class="msg min time unread">未读消息</div>
                        </div>
                    </div>
                    <div class="abs bottom pnl-text">
                        <div class="abs top pnl-warn" id="pnlWarn">
                            <div class="fl btns rel pnl-warn-free">
                                <img src="../../Images/icon/Smile.png" class="kh warn-btn" title="表情" id="emotion" />
                                <img src="../../Images/icon/pic.png" class="kh warn-btn" title="图片" id="emojiBtn" onclick="document.getElementById('image').click()" />
                            </div>
                        </div>
                        <div class="abs cover pnl-input">
                            <div class="scroll" id="text" style="height: 108px; overflow-y: scroll;" contenteditable="true"></div>
                            @*<textarea class="scroll" id="text" name="text" wrap="hard" placeholder="在此输入文字信息..."></textarea>*@
                            <div class="abs atcom-pnl scroll hide" id="atcomPnl">
                                <ul class="atcom" id="atcom"></ul>
                            </div>
                        </div>
                        <div class="abs br pnl-btn" id="btnSent" style="background-color: rgb(32, 196, 202); color: rgb(255, 255, 255);" onclick="SendMsg()">发送</div>
                        <div class="pnl-support" id="copyright">
                            <a href="#">Copyrights
                            </a>
                        </div>
                    </div>
                </div>

                <div style="position: absolute; width: 280px; z-index: 1000; right: 0;">
                    <ul>
                        @foreach (var item in ViewData["Users"] as List<WebApplication1.Models.UserGroupToUSer>)
                        {
                           
                            <li style="list-style-type: none">
                            <input value="@item.UG_UserID" type="hidden" />@Common.Common.GetUserName(Convert.ToInt32(item.UG_UserID))
                  
                    
                            </li>
                        }
                    </ul>
                </div>

            </div>
        </div>
    </div>

    <script type="text/javascript">
        function banned(demo) {
            alert($(demo).parent().find("input").eq(0).val());
            var ban = 0;
            if ($(demo).val() == "禁言") {
                ban = 1;
            }

            $.ajax({
                url: "/UserGroup/bannered", //获取数据列 
                type: 'GET',
                contentType: "application/json",
                datatype: 'json',
                data: {
                    userid: $(demo).parent().find("input").eq(0).val(),
                    groupid: document.getElementById("Groupid").value,
                    id: ban
                },
                success: function (data) {
                    console.log(data);//对数据进行处理
                    if ($(demo).val() == "解禁") {
                        $(demo).attr("value", "禁言")
                    }
                    else {
                        $(demo).attr("value", "解禁")
                    }
                },
                error: function (e) {
                    console.log(e)

                }

            });

        }//禁言




        function Delete(demo) {
            $.ajax({
                url: "/UserGroup/Delete", //获取数据列 
                type: 'GET',
                contentType: "application/json",
                datatype: 'json',
                data: {
                    userid: $(demo).parent().find("input").eq(0).val(),
                    groupid: document.getElementById("Groupid").value,

                },
                success: function (data) {
                    console.log(data);//对数据进行处理
                    location.reload();
                },
                error: function (e) {
                    console.log(e)

                }

            });



        }//禁言

        function LoadMessage() {

            //alert(document.getElementById("msgtopid").value);
            var id = document.getElementById("msgtopid").value;
            if (id == 1) {
                alert("没有更多消息了！");
                return;
            }
            $.ajax({
                url: "/chat/ChatUI", //获取数据列 
                type: 'GET',
                contentType: "application/json",
                datatype: 'json',
                data: {
                    groupid: document.getElementById("Groupid").value,
                    msgid: id
                },
                success: function (data) {
                    formatJsonToSeries(data);//对数据进行处理
                },
                error: function (e) {
                    alert("没有更多消息了");

                }

            });

        }//加载聊天历史记录
        if (document.readyState == "complete") {
            LoadMessage();
        }

        function formatJsonToSeries(data) {
            data.replace(/&quot;/g, "\"")
            var str = "";
            var msgid;
            ////alert(data);
            //console.log(data);
            var json = JSON.parse(data);

            for (var i = json.length - 1; i >= 0; i--) {
                var content;
                var user;

                for (var k in json[i]) {
                    if (i == json.length - 1) {
                        msgid = json[i]["MS_ID"];
                    }
                    content = replace_em(json[i]["GR_Content"]);
                    user = json[i]["GR_FromName"];

                }
                if (user == sessionName) {
                    str += "<div class=\"msg guest\"><div class=\"msg-right\" worker=\"" + user + "\"><div class=\"msg-host photo\" style=\"background-image: url(../../Images/Head.jpg)\"></div><div class=\"msg-ball\" title=\"\">" + content + "</div></div></div>"
                }
                else {
                    var time = new Date();
                    str += "<div class=\"msg robot\"><div class=\"msg-left\" worker=\"" + user + "\"><div class=\"msg-host photo\" style=\"background-image: url(../../Images/Head.jpg)\"></div><div class=\"msg-ball\" title=\"" + time.toLocaleTimeString() + "\">" + content + "</div></div></div>";
                }


            }

            document.getElementById("msgtopid").value = msgid;


            var msgs = document.getElementById("msgs");
            msgs.innerHTML = str + msgs.innerHTML;

        }





        jQuery.browser = {}; (function () { jQuery.browser.msie = false; jQuery.browser.version = 0; if (navigator.userAgent.match(/MSIE ([0-9]+)./)) { jQuery.browser.msie = true; jQuery.browser.version = RegExp.$1; } })();
    </script>
</body>

</html>
